<template>
	<div ref="chartTime" :style="{height, width}"></div>
</template>
<script lang="ts">
import {defineComponent, onMounted, PropType, ref, Ref, reactive, watchEffect} from 'vue';
import {useECharts} from '/@/hooks/web/useECharts';
import {cloneDeep} from 'lodash-es';
import {object} from 'vue-types';
export default defineComponent({
	name: 'bar',
	props: {
		chartData: {
			type: Array,
			default: () => [],
		},
		option: {
			type: Object,
			default: () => ({}),
		},
		width: {
			type: String as PropType<string>,
			default: '100%',
		},
		height: {
			type: String as PropType<string>,
			default: '280px',
		},
		seriesColor: {
			type: String,
			default: '#333',
		},
	},
	setup(props) {
		const chartTime = ref<HTMLDivElement | null>(null);
		const {setOptions, resize} = useECharts(chartTime as Ref<HTMLDivElement>);
		onMounted(() => {
			window.addEventListener('resize', function () {
				resize();
			});
		});
		// let legend = props.chartData.map((item) => {
		//   return item.name;
		// });

		// let legendColor = props.seriesColor;
		let barColor = ['#8bc353', '#e09f31', '#30e8bb', '#ddcc0e', '#1f94ff'];
		// let total = 0;
		// seriesData.forEach((item) => {
		// 	total += item.value;
		// });
		let seriesData = props.chartData;
		let serie = [];

		const option = reactive({
			angleAxis: {
				type: 'value',
				min: 0,
				// max: 200,
				axisLine: {
					show: false,
				},
				axisTick: {
					show: false,
				},
				splitLine: {
					show: false,
				},
				axisLabel: {
					show: false,
				},
			},
			radiusAxis: {
				type: 'category',
				data: seriesData.map((item) => {
					return item.name;
				}),
				z: 1,
				axisLine: {
					show: false,
				},
				axisTick: {
					show: false,
				},
				axisLabel: {
					interval: 0,
					color: '#7d8590',
					align: 'left',
					margin: 55,
				},
			},
			polar: {
				center: ['25%', '50%'],
			},
			series: serie,

			legend: {
				top: '20%',
				right: '5%',
				orient: 'vertical',
				itemWidth: 5,
				itemHeight: 5,
				icon: 'rect',
				formatter: function (name) {
					// 	var data = [];
					// 	seriesData.forEach((element) => {
					// 		data.unshift(element);
					// 	});

					// 	var total1 = 0;
					// 	var target;
					// 	for (var i = 0, l = data.length; i < l; i++) {
					// 		total1 += data[i].value;
					// 		if (data[i].name == name) {
					// 			target = data[i].value;
					// 		}
					// 	}
					// 	var arr = ['{a|' + name + '}', '   ' + '{c|' + target + '}' + '{a|' + '   ' + (target / total1).toFixed(2) + '%}'];
					// 	return arr.join(' ');
					if (seriesData.length) {
						const item = seriesData.filter((item) => item.name === name)[0];
						return `{name|${name}：}{value| ${item.value}} {rate| ${item.timesRate}%}`;
					}
				},

				textStyle: {
					align: 'left',
					verticalAlign: 'middle',
					rich: {
						name: {
							width: 30,
							color: '#000',
							fontSize: 12,
							padding: [10, 15, 10, 15],
						},
						value: {
							color: '#000',
							fontSize: 12,
							padding: [10, 15, 10, 15],
							width: 30,
						},
						rate: {
							color: '#000',
							fontSize: 12,
							padding: [10, 7, 10, 3],
						},
					},
				},
				shadowBlur: 10,
				show: true,
				z: 200,
				data: seriesData.map((item) => item.name),
			},
		});

		watchEffect(() => {
			props.chartData && initCharts();
		});

		function initCharts() {
			if (props.option) {
				Object.assign(option, cloneDeep(props.option));
			}
			let seriesData2 = props.chartData.map((item) => {
				return item.value;
			});
			// let xAxisData = props.chartData.map((item) => {
			//   return item.name;
			// });
			serie = [];
			seriesData = props.chartData;

			seriesData.forEach((item, index) => {
				let data = [];
				for (let i = 0; i < seriesData.length; i++) {
					data.push(0);
				}
				data[index] = item.value;
				serie.push({
					name: item.name,
					type: 'bar',
					stack: 'a',
					coordinateSystem: 'polar',
					barWidth: 12, // 10条数据的时候 10
					// barGap: 10,
					data: data,
					itemStyle: {
						color: barColor[index],
					},
				});
			});

			option.radiusAxis.data = seriesData.map((item) => {
				return item.name;
			});
			option.legend.formatter = function (name) {
				if (seriesData.length) {
					const item = seriesData.filter((item) => item.name === name)[0];
					return `{name|${name}：}{value| ${item.value}} {rate| ${item.timesRate}%}`;
				}
			};
			option.legend.data = seriesData.map((item) => item.name);
			option.series = serie;

			setOptions(option);
		}
		return {chartTime};
	},
});
</script>
